<template>
	<view class="container">
		<!-- <view class="hader">
			<image class="bannar" src="https://dysx-h5.shjiuliwl.com/Eblock/images/立即添加微信咨询.png"></image>
			<view class="miaoshu">
				<image class="miaoshutet" src="https://dysx-h5.shjiuliwl.com/Eblock/images/长按下方二维码添加客服微信.png"></image>
				<image class="kefu" src="https://dysx-h5.shjiuliwl.com/Eblock/images/kefu.png"></image>
			</view>
		</view> -->
		<view class="center">
			<image class="mainimg2"	mode="widthFix" :src="cardvalue.crad_qr_code" :show-menu-by-longpress="true"></image>
		</view>
		<view class="buttom">
			<view class="text" v-if="cardvalue.card_state == 1">如无法识别，请截图保存至相册后识别</view>
			<view class="submit" @tap="service" v-if="cardvalue.card_state == 0">联系客服审核 获取推广链接</view>
			<view class="copylink" @tap="copylink(servicevalue.system_card_url)" v-if="cardvalue.card_state == 0">复制未审核链接 生成后24小时内可使用</view>
			<view class="describe" v-if="cardvalue.card_state == 0">客服未审核，不消耗账号内卡片剩余数量</view>
		</view>
	</view>
</template>

<script>
import { onGotApiData , getService } from '../../utils/api.js';
export default {
	data() {
		return {
			cardvalue: {}, // 获取到的值
			code:'',
			servicevalue:{},
		}
	},
	onLoad (e){
		console.log('地址栏参数',e)
		this.code = e.card_code
		if(this.code){
		// 获取卡片二维码
			this.getcard()
			// 获取客服链接
			this.getservice()
		}
	},

	methods: {
		// 获取卡片二维码
		getcard () {
			const params = {
				code:this.code
			}
			onGotApiData('/wxxcx_api/card/v1/get_qr_code','GET',params,this.card_value)
		},
		// 获取基础信息结果
		card_value (result) {
			console.log('result',result.data) 
			this.cardvalue  = result.data
		},
		// 吊起获取客服联系客服接口
		getservice(){
			let params = {
			}
			onGotApiData('/wxxcx_api/kf/get','GET',params,this.service_value)
		},
		// 客服信息结果
		service_value(result){
			console.log('result',result)
			if(result.code == 200){
				this.servicevalue = result.data
			}
		},
		// 点击联系客服
		service() {
			// 复制文本到剪切板
			uni.setClipboardData({
				data: this.code,
				success: function() {
					// uni.showToast({
					// 	title: '审核码复制成功',
					// 	icon: 'none',
					// 	//显示持续时间为 2秒
					// 	duration: 2000
					// })
					console.log('复制成功')
				}
			})
			const that = this
			// window.location.href = 'https://work.weixin.qq.com/kfid/kfc57df3bacfa1fd3f9'
			wx.openCustomerServiceChat({
				extInfo: {url: `${that.servicevalue.kf_link}`},
				corpId: that.servicevalue.corpId,
				success(res) {
					console.log("我是客服",res)
				},
				fail(res){ 
					console.log("我是失败客服",res)
				}
			})
		},
		// 复制卡片连接
		copylink(){
			// console.log('ee',this.cardvalue.system_card_url)
			// 复制文本到剪切板
			uni.setClipboardData({
				data: this.cardvalue.system_card_url,
				success: function() {
					uni.showToast({
						title: '卡片链接复制成功',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
					// console.log('复制成功')
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		// overflow: hidden;
		font-family: '思源黑体';
		.hader{
			width: 750rpx;
			height: 300rpx;
			margin: 0 auto;
			padding: 10rpx 0 0 0;
			background: linear-gradient(180deg, rgba(254, 128, 39, 1) 0%, rgba(254, 93, 49, 1));
			// border: 1px solid black;
			.bannar{
				width: 560rpx;
				height: 120rpx;
				margin: 0 0 0 50rpx;
			}
			.miaoshu{
				width: 750rpx;
				height: 200rpx;
				display: flex;
				.miaoshutet{
					width: 460rpx;
					height: 46rpx;
					margin: 10rpx 0 0 50rpx;
					// border: 1px solid black;
				}
				.kefu{
					width: 180rpx;
					height: 180rpx;
					margin:0 0 0 20rpx;
				}
			}
		}
		.center{
			width: 750rpx;
			height: auto; 
			background-color: #fff;
			.mainimg2{	
				width: 100%; /* 或者指定宽度 */
				// margin-top: 200rpx;
				// margin-left:15%;
				// padding: 10rpx 0;
			}
		}
		.buttom{
			width: 750rpx;
			// height: 810px;
			margin-top: 0 auto;
			padding: 50rpx 0 ;
			background:	linear-gradient(180deg, rgba(251, 217, 213, 1) 0%, rgba(255, 72, 58, 0) 100%);
			.text{
				width: 750rpx;
				height: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: rgba(255, 43, 43, 1);
				text-align: center;
			}
			.submit{
				width: 660rpx;
				height: 100rpx;
				border-radius: 30px;
				background: linear-gradient(90deg, rgba(255, 124, 71, 1) 0%, rgba(255, 74, 3, 1) 100%);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				margin: 0 auto;
				margin-top: 40rpx;
				font-size: 36rpx;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
			.copylink{
				width: 660rpx;
				height: 100rpx;
				border-radius: 30px;
				background: linear-gradient(90deg, rgba(76, 108, 252, 1) 0%, rgba(3, 49, 255, 1) 100%);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				margin: 0 auto;
				margin-top: 60rpx;
				font-size: 32rpx;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
			.describe{
				width: 660rpx;
				height: 50rpx;
				font-size: 28rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				line-height: 60rpx;
				color: rgba(255, 87, 51, 1);
				text-align: center;
			}
		}

	}
</style>
